<template>
  <view class="user_info_page">
    <u-navbar autoBack fixed placeholder bgColor="#fff">
      <template #left>
        <view class="navBar">
          <u-icon name="arrow-left" color="#000" size="18"></u-icon>
          <text class="nav_title">个人信息</text>
        </view>
      </template>
    </u-navbar>
    <view class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
      <view class="info">
        <view class="avatar_box" @click="chooseAvatar">
          <view class="avatar">
            <image :src="avatarUrl" mode="widthFix"></image>
            <view class="camera">
              <u-icon name="camera-fill" color="#fff"></u-icon>
            </view>
          </view>
        </view>
        <u-cell-group :border="false">
          <u-cell title="名字" :value="name" :title-style="titleStyle" :value-style="valueStyle"></u-cell>
          <u-cell title="性别" :value="sex === '0' ? '男' : '女'" :title-style="titleStyle" :value-style="valueStyle"></u-cell>
          <u-cell title="生日" value="-" :title-style="titleStyle" :value-style="valueStyle"></u-cell>
          <u-cell title="地区" value="-" :title-style="titleStyle" :value-style="valueStyle"></u-cell>
        </u-cell-group>
      </view>
      <view class="logout" @click="logout">退出登录</view>
    </view>
  </view>
</template>

<script>

import {showConfirm} from "@/utils/common";
import {mapGetters} from 'vuex';
import {uploadImg} from "@/api/system/user";
import store from "@/store";

export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['name', 'sex', 'avatar']),
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    },
    avatarUrl() {
      if (!this.avatar) {
        return '@/static/img/profile.jpg'
      }
      return this.avatar
    },
    titleStyle() {
      return ({
        'font-size': '28rpx',
        'font-family': 'HarmonyOS_Sans_SC',
        color: '#999999'
      })
    },
    valueStyle() {
      return ({
        'font-size': '28rpx',
        'font-family': 'HarmonyOS_Sans_SC_Medium',
        color: '#000000'
      })
    }
  },
  methods: {
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: function (res) {
          console.log(JSON.stringify(res.tempFilePaths));
          uploadImg({
            filePath: res.tempFilePaths[0]
          }).then(res => {
            console.warn(res.data.url)
          })
        }
      })
    },
    logout() {
      showConfirm('是否退出登录?').then(res => {
        if (res.confirm) {
          store.dispatch('LogOut').then(res => {
            uni.reLaunch({ url: '/pages/login/login' })
          })
        }
      })
    },
    userInfoHandle() {
      uni.navigateTo({
        url: '/pages/mine/userInfo'
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.user_info_page {
  height: 100vh;
  width: 100vw;

  .navBar {
    display: flex;
    align-items: center;

    .nav_title {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
      margin-left: 8rpx;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    .info {
      background: #fff;
      padding: 0 32rpx;
      .avatar_box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 40rpx 0;
        .avatar {
          width: 192rpx;
          height: 192rpx;
          position: relative;
          image {
            border-radius: 50%;
          }
          .camera {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 5rpx;
            right: 5rpx;
          }
        }
      }
    }
    .logout {
      margin-top: 200rpx;
      height: 96rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #01756B;
    }
  }
}
</style>
